<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
// 引入echarts
import echarts from 'echarts';
export default {
  name:'',
  props:['pieInfo'],
  mounted() {
    setInterval(()=>{
      this.refreshData();
    },2000)
  },
  data() {
    return {
      pieData:[
        { value: 5, name: '不及格' },
        { value: 20, name: '及格' },
        { value: 40, name: '良' },
        { value: 3, name: '优秀' },
      ],
      option:{
        color:['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '70%',
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            // labelLine: {
            //   show: false
            // },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        //布局调试
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },
      },
    }
  },
  methods: {
    refreshData(){
      this.pieData[0].value = this.pieInfo.unqualifiedNum;
      this.pieData[1].value = this.pieInfo.qualifiedNum;
      this.pieData[2].value = this.pieInfo.goodNum;
      this.pieData[3].value = this.pieInfo.excellentNum;
      let pieCharts = echarts.init(this.$refs.charts);
      // 配置数据
      this.option.series[0].data = this.pieData;
      pieCharts.setOption(this.option);
    }
  },
  watch:{
    'pieInfo.unqualifiedNum':{
      handler(){
        this.refreshData();
      }
    },
    'pieInfo.qualifiedNum':{
      handler(){
        this.refreshData();
      }
    },
    'pieInfo.goodNum':{
      handler(){
        this.refreshData();
      }
    },
    'pieInfo.excellentNum':{
      handler(){
        this.refreshData();
      }
    },
  },
}
</script>

<style scoped>
.charts{
  width:100%;
  height:100%;
}
</style>